<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlowMind - 流程图与思维导图工具</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'lofi-beige': '#f5f1e6',
                        'lofi-brown': '#8b7d6b',
                        'lofi-dark': '#4a443a',
                        'lofi-accent': '#b85c38',
                        'lofi-light': '#f9f6ef'
                    },
                    fontFamily: {
                        'lofi': ['Courier New', 'monospace', 'Comic Sans MS', 'cursive']
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .lofi-border {
                border: 2px dashed #8b7d6b;
                border-radius: 4px;
            }
            .lofi-btn {
                @apply bg-lofi-light border-2 border-lofi-brown rounded-md px-3 py-1 hover:bg-lofi-beige transition-all duration-200 font-lofi text-lofi-dark;
                box-shadow: 3px 3px 0px #8b7d6b;
            }
            .lofi-btn:active {
                box-shadow: 1px 1px 0px #8b7d6b;
                transform: translate(2px, 2px);
            }
            .lofi-card {
                @apply bg-lofi-light lofi-border p-4 font-lofi text-lofi-dark;
                box-shadow: 4px 4px 0px rgba(139, 125, 107, 0.3);
            }
            .noise-bg {
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
            }
            .handwritten {
                font-family: 'Comic Sans MS', cursive, sans-serif;
            }
        }
    </style>
</head>
<body class="bg-lofi-beige noise-bg min-h-screen flex flex-col font-lofi text-lofi-dark">
    <!-- 顶部导航栏 -->
    <header class="w-full bg-lofi-light lofi-border py-3 px-4 flex justify-between items-center z-30 relative">
        <!-- 左侧 - 侧边栏控制按钮 -->
        <div class="flex items-center">
            <button id="sidebar-toggle" class="lofi-btn mr-4">
                <i class="fa fa-bars mr-1"></i> 菜单
            </button>
            <h1 class="text-xl md:text-2xl font-bold handwritten text-lofi-accent">
                <i class="fa fa-sitemap mr-2"></i>FlowMind
            </h1>
        </div>
        
        <!-- 右侧 - 用户信息 -->
        <div class="relative">
            <div id="user-menu-button" class="flex items-center cursor-pointer">
                <div class="w-8 h-8 rounded-full bg-lofi-brown flex items-center justify-center text-white mr-2">
                    <i class="fa fa-user"></i>
                </div>
                <span>用户名</span>
                <i class="fa fa-chevron-down ml-1 text-xs"></i>
            </div>
            
            <!-- 用户菜单 (默认隐藏) -->
            <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 lofi-card z-40">
                <div class="py-1">
                    <a href="#" class="block px-4 py-2 hover:bg-lofi-beige">
                        <i class="fa fa-user-circle mr-2"></i>个人资料
                    </a>
                    <a href="#" class="block px-4 py-2 hover:bg-lofi-beige">
                        <i class="fa fa-cog mr-2"></i>设置
                    </a>
                    <hr class="my-1 border-lofi-brown/30">
                    <a href="#" class="block px-4 py-2 hover:bg-lofi-beige text-lofi-accent">
                        <i class="fa fa-sign-out mr-2"></i>退出登录
                    </a>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边栏 -->
        <aside id="sidebar" class="w-64 bg-lofi-light lofi-border h-[calc(100vh-65px)] mr-4 transform transition-transform duration-300 ease-in-out z-20">
            <div class="p-4">
                <nav>
                    <ul>
                        <li class="mb-2">
                            <a href="#" class="lofi-btn w-full block flex items-center">
                                <i class="fa fa-home mr-2"></i> 首页
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="lofi-btn w-full block flex items-center">
                                <i class="fa fa-briefcase mr-2"></i> 工作中心
                            </a>
                        </li>
                        <li class="mb-2 mt-6">
                            <p class="text-sm text-lofi-brown mb-2 px-2">最近文件</p>
                            <div class="pl-2 space-y-1">
                                <a href="#" class="block p-2 hover:bg-lofi-beige rounded text-sm border-l-2 border-transparent hover:border-lofi-accent">
                                    项目规划图
                                </a>
                                <a href="#" class="block p-2 hover:bg-lofi-beige rounded text-sm border-l-2 border-transparent hover:border-lofi-accent">
                                    思维导图-想法
                                </a>
                                <a href="#" class="block p-2 hover:bg-lofi-beige rounded text-sm border-l-2 border-transparent hover:border-lofi-accent">
                                    流程设计
                                </a>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <div class="absolute bottom-4 left-0 right-0 px-4">
                <button class="lofi-btn w-full flex items-center justify-center">
                    <i class="fa fa-plus mr-2"></i> 新建文件
                </button>
            </div>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 overflow-auto p-4">
            <div class="lofi-card h-full min-h-[calc(100vh-100px)]">
                <div class="mb-6">
                    <h2 class="text-xl font-bold mb-4 handwritten">欢迎使用 FlowMind</h2>
                    <p class="text-sm mb-4">在这里创建、编辑和分享你的流程图与思维导图</p>
                    
                    <div class="flex flex-wrap gap-3 mb-6">
                        <button class="lofi-btn flex items-center">
                            <i class="fa fa-file-o mr-2"></i> 新建流程图
                        </button>
                        <button class="lofi-btn flex items-center">
                            <i class="fa fa-sitemap mr-2"></i> 新建思维导图
                        </button>
                        <button class="lofi-btn flex items-center">
                            <i class="fa fa-folder-open-o mr-2"></i> 打开文件
                        </button>
                    </div>
                </div>
                
                <div class="border-t-2 border-dashed border-lofi-brown/30 pt-4">
                    <h3 class="text-lg font-bold mb-3 handwritten">最近项目</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- 项目卡片 1 -->
                        <div class="lofi-card hover:bg-lofi-beige transition-colors cursor-pointer">
                            <div class="flex justify-between items-start mb-2">
                                <span class="text-sm font-bold">项目规划图</span>
                                <span class="text-xs text-lofi-brown">2天前</span>
                            </div>
                            <div class="h-24 bg-lofi-beige rounded mb-2 flex items-center justify-center">
                                <i class="fa fa-flowchart text-4xl text-lofi-brown/50"></i>
                            </div>
                            <div class="flex justify-between text-xs">
                                <span>流程图</span>
                                <div>
                                    <i class="fa fa-pencil text-lofi-brown hover:text-lofi-accent mr-2"></i>
                                    <i class="fa fa-trash-o text-lofi-brown hover:text-lofi-accent"></i>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 项目卡片 2 -->
                        <div class="lofi-card hover:bg-lofi-beige transition-colors cursor-pointer">
                            <div class="flex justify-between items-start mb-2">
                                <span class="text-sm font-bold">思维导图-想法</span>
                                <span class="text-xs text-lofi-brown">1周前</span>
                            </div>
                            <div class="h-24 bg-lofi-beige rounded mb-2 flex items-center justify-center">
                                <i class="fa fa-sitemap text-4xl text-lofi-brown/50"></i>
                            </div>
                            <div class="flex justify-between text-xs">
                                <span>思维导图</span>
                                <div>
                                    <i class="fa fa-pencil text-lofi-brown hover:text-lofi-accent mr-2"></i>
                                    <i class="fa fa-trash-o text-lofi-brown hover:text-lofi-accent"></i>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 项目卡片 3 -->
                        <div class="lofi-card hover:bg-lofi-beige transition-colors cursor-pointer">
                            <div class="flex justify-between items-start mb-2">
                                <span class="text-sm font-bold">流程设计</span>
                                <span class="text-xs text-lofi-brown">2周前</span>
                            </div>
                            <div class="h-24 bg-lofi-beige rounded mb-2 flex items-center justify-center">
                                <i class="fa fa-exchange text-4xl text-lofi-brown/50"></i>
                            </div>
                            <div class="flex justify-between text-xs">
                                <span>流程图</span>
                                <div>
                                    <i class="fa fa-pencil text-lofi-brown hover:text-lofi-accent mr-2"></i>
                                    <i class="fa fa-trash-o text-lofi-brown hover:text-lofi-accent"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // 侧边栏切换功能
        const sidebarToggle = document.getElementById('sidebar-toggle');
        const sidebar = document.getElementById('sidebar');
        
        sidebarToggle.addEventListener('click', () => {
            if (sidebar.classList.contains('-translate-x-full')) {
                sidebar.classList.remove('-translate-x-full');
                sidebar.classList.add('translate-x-0');
            } else {
                sidebar.classList.remove('translate-x-0');
                sidebar.classList.add('-translate-x-full');
            }
        });
        
        // 用户菜单功能
        const userMenuButton = document.getElementById('user-menu-button');
        const userMenu = document.getElementById('user-menu');
        
        userMenuButton.addEventListener('click', () => {
            userMenu.classList.toggle('hidden');
        });
        
        // 点击其他区域关闭用户菜单
        document.addEventListener('click', (e) => {
            if (!userMenuButton.contains(e.target) && !userMenu.contains(e.target)) {
                userMenu.classList.add('hidden');
            }
        });
        
        // 响应式处理
        function handleResize() {
            if (window.innerWidth < 768) {
                sidebar.classList.add('-translate-x-full');
                sidebar.classList.remove('translate-x-0');
            } else {
                sidebar.classList.remove('-translate-x-full');
                sidebar.classList.add('translate-x-0');
            }
        }
        
        // 初始加载时处理
        handleResize();
        // 窗口大小改变时处理
        window.addEventListener('resize', handleResize);
    </script>
</body>
</html>
